import React, { memo } from 'react';
import { Table } from 'antd';
import type { RowSelectionType } from 'antd/lib/table/interface';

import classNames from 'classnames/bind';
import style from './style.module.scss';
const cx = classNames.bind(style);

const { Column } = Table;

interface PropType {
  tableName: string;
  loading: boolean;
  border?: boolean;
  rowKey?: string;
  data: any[];
  columnList: { title: string; dataIndex?: string; align: any; width?: number; slot?: any }[];
  handler?: any;
  toolbar?: any[];
  slot?: any;
  page?: { defaultPageSize: number; total: number; onChange: any };
  selectType?: string;
  rowSelection?: any;
}

const TableContent: React.FC<PropType> = memo((props) => {
  const {
    tableName,
    border,
    loading,
    data,
    rowKey,
    columnList,
    slot,
    page,
    toolbar,
    selectType,
    rowSelection
  } = props;

  return (
    <>
      <div className={cx('toolbar')}>
        {tableName && <div className={cx('table-name')}>{tableName}</div>}
        <div className={cx('tool-btns')}>{toolbar.map((item) => item)}</div>
      </div>
      <Table
        rowKey={rowKey ?? 'id'}
        loading={loading}
        dataSource={data}
        bordered={border ?? true}
        pagination={{ ...page }}
        rowSelection={selectType && { type: selectType as RowSelectionType, ...rowSelection }}
      >
        {columnList?.map((item, index) => {
          return (
            <Column
              key={index}
              title={item.title}
              dataIndex={item.dataIndex}
              align={item.align}
              width={item.width}
              render={slot && slot[item.slot]}
            />
          );
        })}
      </Table>
    </>
  );
});

export default TableContent;
